<template>
    <view :style="[pageStyle, themeVars]">
        <cl-header
            title="cl-image 演示"
            :left-show="true"
            :background-color="headerBgColor"
            :text-color="headerTextColor"
            @goback="() => uni.navigateBack()"
        />

        <view class="hero">
            <view class="hero-title" :style="textPrimaryStyle">cl-image</view>
            <view class="hero-sub" :style="textSecondaryStyle">支持懒加载、占位、预览与圆角等</view>
        </view>

        <view class="section" :style="surfaceCardStyle">
            <view class="title" :style="textPrimaryStyle">基础用法</view>
            <view class="row">
                <cl-image :src="img1" width="300rpx" height="200rpx" />
            </view>
        </view>

        <view class="section" :style="surfaceCardStyle">
            <view class="title" :style="textPrimaryStyle">占位 / 懒加载 / 圆角</view>
            <view class="row gallery">
                <cl-image :src="img2" width="200rpx" height="200rpx" :lazy-load="true" :fade-show="true" border-radius="24rpx" />
                <cl-image src="/static/images/default-avatar.png" width="120rpx" height="120rpx" :is-icon="true" />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useThemeStyles } from '@/composables/useThemeStyles/index'
import { useTheme } from '@/composables/useTheme'

const { pageStyle, surfaceCardStyle, textPrimaryStyle, textSecondaryStyle, headerBgColor, headerTextColor } = useThemeStyles()
const { getThemeVars } = useTheme()
const themeVars = computed(() => getThemeVars())

const img1 = ref('https://picsum.photos/600/400')
const img2 = ref('https://picsum.photos/400/400')
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';

.hero {
    padding: $spacing-lg $spacing-lg 0;
}

.hero-title {
    font-size: $font-size-xxl;
    font-weight: $font-weight-bold;
}

.hero-sub {
    color: var(--theme-text-secondary, $text-secondary);
    margin-top: 6rpx;
}

.section {
    @include card-style($card-shadow, $border-radius-large);
    margin: $spacing-lg;
    padding: $spacing-xl;
}

.title {
    font-weight: $font-weight-bold;
    margin-bottom: $spacing-md;
}

.row {
    display: flex;
    gap: $spacing-lg;
    align-items: center;
    flex-wrap: wrap;
}

.gallery {
    background: var(--theme-surface, $bg-secondary);
    border-radius: $border-radius-medium;
    padding: $spacing-md;
}
</style>
